<template>
  <div class="common-table-operations-component">
    <div class="left-actions">
      <span v-if="selectedCount > 0" class="selected-count">
        {{ $t('common.selectedItems', { count: selectedCount }) }}
      </span>
      <div class="action-buttons">
        <a-button type="primary" @click="$emit('add')">
          <template #icon><PlusOutlined /></template>
          {{ $t('notification.send') }}
        </a-button>
        <a-button
          type="primary"
          :disabled="selectedCount === 0"
          @click="$emit('batch-read')"
        >
          <template #icon><CheckOutlined /></template>
          {{ $t('notification.markRead') }}
        </a-button>
        <a-button @click="$emit('mark-all-read')">
          <template #icon><CheckSquareOutlined /></template>
          {{ $t('notification.markAllRead') }}
        </a-button>
        <a-button @click="$emit('clear-read')">
          <template #icon><DeleteOutlined /></template>
          {{ $t('notification.clearRead') }}
        </a-button>
        <a-popconfirm
          :title="$t('notification.confirmBatchDelete')"
          @confirm="$emit('batch-delete')"
          :disabled="selectedCount === 0"
        >
          <a-button
            type="primary"
            danger
            :disabled="selectedCount === 0"
          >
            <template #icon><DeleteOutlined /></template>
            {{ $t('common.batchDelete') }}
          </a-button>
        </a-popconfirm>
        <a-button @click="$emit('refresh')">
          <template #icon><ReloadOutlined /></template>
          {{ $t('common.refresh') }}
        </a-button>
      </div>
    </div>
    <div class="right-actions">
      <a-space>
        <a-button type="primary" @click="$emit('search')">
          <template #icon><SearchOutlined /></template>
          {{ $t('common.search') }}
        </a-button>
        <a-button @click="$emit('reset')">
          <template #icon><RedoOutlined /></template>
          {{ $t('common.reset') }}
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'TableOperations'
})

// Props定义
const props = withDefaults(defineProps<{
  selectedCount?: number
}>(), {
  selectedCount: 0
})

// Emits定义
const emit = defineEmits([
  'add', 
  'batch-read', 
  'mark-all-read', 
  'clear-read',
  'batch-delete', 
  'refresh',
  'search',
  'reset'
])
</script>

<style lang="scss" scoped>

</style> 